import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  UploadOutlined,
  UndoOutlined,
  CheckOutlined
} from '@ant-design/icons';
import {
  Button,
  message,
  Form,
  DatePicker,
  Upload,
  Modal,
  Row,
  Col,
  Input,
  Popconfirm,
  Select, Space,
} from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import '@/assets/css/index.less';
import ProForm, { ProFormText, ProFormSelect } from '@ant-design/pro-form';
import {
  deletePhotoCategoryById,
  getPhotoCategoryList,
  insertPhotoCategory,
  updatePhotoCategory,
} from '@/services/pictureManager';
const { TextArea } = Input;
const CategoryManagement: React.FC = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState();
  const [modalTarget, setModalTarget] = useState('');
  const actionRef = useRef<ActionType>();
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(40);
  const [dataArray, setDataArray] = useState([]);
  const [pageSize, setPageSize] = useState(10);
  const [pagination, setPagination] = useState({
    current: page,
    pageSize: pageSize,
    position: ['bottomRight'],
    size: 'small',
    showSizeChanger: true,
    total: total,
  });
  const onCancel = () => {
    setModalVisible(false);
    setCurrentRow(undefined);
  };

  const columns: ProColumns[] = [
    {
      title: '图片类别',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'name',
    },
    {
      title: '分类说明',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'categoryDes',
    },
    {
      title: '操作',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'id',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            setModalVisible(true);
            setCurrentRow(record);
            setModalTarget('edit');
          }}
        >
          <Button className={'buttonMargin'} shape={'round'} type="primary" icon={<EditOutlined />}>
            编辑
          </Button>
        </a>,
        <Popconfirm
          title="确定是否删除?"
          onConfirm={async () => {
            await deletePhotoCategoryById({
              id: record.id,
            });
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }}
          key="delete"
        >
          <a style={{ color: 'red' }}>
            <Button danger className={'buttonMargin'} shape={'round'} icon={<DeleteOutlined />}>
              删除
            </Button>
          </a>
        </Popconfirm>,
        //   <a
        //   key="view"
        //   onClick={() => {

        //     // handleUpdateModalVisible(true);
        //     // setCurrentRow(record);
        //   }}
        // >
        //   查看图片
        // </a>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable
        search={false}
        // headerTitle="视媒管理"
        rowKey="id"
        tableStyle={{ textAlign: 'center' }}
        options={false}
        actionRef={actionRef}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={(e) => {
              setModalVisible(true);
              setModalTarget('add');
            }}
          >
            <PlusOutlined />
            添加
          </Button>,
        ]}
        request={async () => {
          const msg = await getPhotoCategoryList();

          return {
            data: msg.data.photoCategoryList,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: msg.code === '0',
            // 不传会使用 data 的长度，如果是分页一定要传
            // total: number,
          };
        }}
        columns={columns}
        rowSelection={
          {
            // onChange: (_, selectedRows) => {
            //     setSelectedRows(selectedRows);
            // },
          }
        }
      ></ProTable>
      <Modal
        // title="编辑用户"
        title={modalTarget === 'edit' ? '编辑类别信息' : '添加图片分类'}
        width="600px"
        destroyOnClose
        open={modalVisible}
        onCancel={onCancel}
        footer={null}
      >
        <ProForm
          //     form={form}
          //     layout="horizontal"
          //     {...formLayout}
          initialValues={currentRow || {}}
          onFinish={async (values) => {
            if (modalTarget === 'edit') {
              await updatePhotoCategory({
                id: currentRow && currentRow.id,
                ...values,
              });
            } else if (modalTarget === 'add') {
              await insertPhotoCategory(values);
            }

            setModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
            setCurrentRow(undefined);
          }}
          //     onReset={onReset}
          submitter={{
            render: (_, dom) => (
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Space>
                  {/*{dom}*/}
                  {<Button onClick={() => {
                    _.reset()
                  }}><UndoOutlined />重置</Button>}
                  {<Button type={"primary"} onClick={() => {
                    _.submit()
                  }}><CheckOutlined />提交</Button>}

                </Space>
              </div>
            ),
          }}
        >
          <ProFormText
            rules={[
              {
                required: true,
                message: '类别名称必填',
              },
            ]}
            width="md"
            name="name"
            placeholder="请填写类别名称"
            label="类别名称"
          />
          <Form.Item label="说明" name="categoryDes">
            <TextArea
              className=""
              showCount
              maxLength={300}
              // style={{ height: 120, marginBottom: 24, width: 300}}
              // onChange={onChange}
              placeholder="输入备注信息"
            />
          </Form.Item>
        </ProForm>
      </Modal>
    </PageContainer>
  );
};
export default CategoryManagement;
